<template>
  <view class="rf-category">
    <!--顶部搜索导航栏-->
    <view class="input-box">
      <input
        @tap.stop="toSearch"
        disabled
        :value="hotSearchDefault"
        placeholder="搜索商品"
        style="color: #888; width: 690upx"
        placeholder-style="color:#ccc;"
      />
      <view class="iconfont iconsousuo2" @tap.stop="toSearch"></view>
    </view>
    <view class="category-list" @touchmove.stop.prevent="moveHandle">
      <!-- 左侧分类导航 -->
      <scroll-view scroll-y="true" class="left">
        <view
          class="row"
          v-for="(fItem, fIndex) in leftList"
          :key="fItem.id"
          :class="[fIndex === showCategoryIndex ? 'on' : '']"
          @tap="showCategory(fIndex, fItem)"
        >
          <view>
            <view class="block"></view>
            {{ fItem.name }}
          </view>
        </view>
      </scroll-view>
      <!--右侧子导航-->
      <view class="right">
        <scroll-view scroll-y="true">
          <view class="category" v-if="categoryProductList.length > 0">
            <view class="list">
              <view
                v-for="(item, index) in categoryProductList"
                @tap="handleCategoryInvertedChange(item, index)"
                :key="index"
                class="list-wrapper"
              >
                <view class="list-item-engine">
                  <image class="image-item" :src="item.images[0].path"></image>
                </view>
                <view class="engine-text"> {{ item.title }} </view>
              </view>
            </view>
          </view>
          <view class="no-data" v-if="categoryProductList.length === 0">
            <i class="iconfont icon404"></i>
            暂无商品
          </view>
        </scroll-view>
      </view>
    </view>
    <!--加载动画-->
    <rfLoading isFullScreen :active="loading"></rfLoading>
    <tab-bar :current="currentIndex" @change="tabchange"></tab-bar>
  </view>
</template>
<script>
import { category, deleteproduct } from "@/api/basic";
import { index_product } from "@/api/product";
import rfSearchBar from "@/components/rf-search-bar";
import tabBar from "@/components/tabbar/index.vue";
export default {
  components: {
    rfSearchBar,
    tabBar,
  },
  data() {
    return {
      hotSearchDefault: "请输入关键字", // 搜索默认关键字
      currentIndex: 1,
      showCategoryIndex: 0, // 一级菜单高亮显示序号
      categoryList: [], // 分类列表
      specClass: "none", // 规格弹窗
      productDetail: {}, // 商品详情
      leftList: [],
      search: {},
      loading: true,
      categoryProductList: [],
      loadingType: "more",
      page: 1,
      productId: null,
      productLoading: true,
    };
  },
  // 每次页面显示 执行该方法
  onLoad() {
    this.initData();
  },
  methods: {
    tabchange(item) {
      this.$mRouter.push({ route: item.pagePath });
    },
    moveHandle() {},
    // 监听二级分类变化
    handleCategoryInvertedChange(item, index) {
      this.$mRouter.push({ route: `/pages/product/product?id=${item.id}` });
    },
    stopPrevent() {},
    hideSpec() {
      this.specClass = "hide";
      setTimeout(() => {
        this.specClass = "none";
      }, 250);
    },
    // 获取产品详情
    async getProductDetail(row) {
      await this.$http
        .get(`${productDetail}`, {
          id: row.id,
        })
        .then(async (r) => {
          this.productDetail = r.data;
          this.specClass = "show";
        });
    },
    // 跳转至商品列表
    navTo(route) {
      this.$mRouter.push({ route });
    },
    // 数据初始化
    async initData() {
      this.search = uni.getStorageSync("search") || {};
      this.hotSearchDefault = this.search.hot_search_default || "请输入关键字";
      this.categoryList = [];
      this.categoryProductList = [];
      await this.getProductCate("", "1");
    },
    // 获取商品分类列表
    async getProductCate(type, level) {
      await this.$http
        .get(`${category}`, { level: level })
        .then(async (res) => {
          if (type === "refresh") {
            uni.stopPullDownRefresh();
          }
          this.leftList = res.data;
          this.productId = res.data[0].id;
          await this.getProductList(this.productId);
          this.loading = false;
        })
        .catch(() => {
          if (type === "refresh") {
            uni.stopPullDownRefresh();
          }
          this.loading = false;
        });
    },
    // 分类切换显示
    showCategory(index, item) {
      this.showCategoryIndex = index;
      this.getProductList(item.id);
    },
    // 获取产品列表
    async getProductList(id) {
      const params = {};
      params.page = this.page;
      await this.$http
        .get(`${index_product}/${id}`, { status: "" })
        .then(async (res) => {
          if (res.data) {
            this.categoryProductList = res.data.data;
          } else {
            this.categoryProductList = [];
          }
        });
    },
    // 跳转至搜索详情页
    toSearch() {
      this.$mRouter.push({
        route: `/pages/index/search/search?data=${JSON.stringify(this.search)}`,
      });
    },
  },
};
</script>
<style lang="scss">
page {
  background-color: $color-white;
}
.rf-category {
  background-color: $color-white;
  border-top: 1upx solid #eeeeee;
  border-bottom: 1upx solid #eeeeee;
  /*  #ifdef  APP-PLUS  */
  // margin-top: calc(20upx + var(--status-bar-height));
  /*  #endif  */
  /*模块分类*/
  .category-list {
    width: 100%;
    background-color: #fff;
    display: flex;
    height: 100%;
    .left,
    .right {
      position: absolute;
      top: 104upx;
      bottom: 0px;
      /*  #ifdef  APP-PLUS  */
      //   top: calc(80upx + var(--status-bar-height));
      /*  #endif  */
    }
    .left {
      width: 220upx;
      left: 0upx;
      right: 0;
      background-color: #eeeeee;
      .row {
        width: 100%;
        height: 90upx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28upx;
        font-weight: 500;
        color: #999999;
        &.on {
          height: 100upx;
          background-color: #fff;
          font-weight: 500;
          color: #333333;
          font-size: 28upx;
          color: #2d2d2d;
        }
      }
    }
    .right {
      right: 0;
      background-color: #fff;
      white-space: nowrap;
      width: 530upx;
      .second-category {
        z-index: 10;
        white-space: nowrap;
        width: 100%;
        margin: $spacing-sm $spacing-sm $spacing-base;
        .second-category-tag {
          margin-right: $spacing-base;
          padding: 5upx $spacing-lg;
          display: inline-block;
          border-radius: 8upx;
          font-size: $font-sm + 2upx;
        }
        .second-category-normal {
          color: $font-color-dark;
          border: none;
          background-color: $page-color-light;
        }
      }
      .category {
        width: 100%;
        bottom: 98upx;
        top: 4px;
        position: relative;
        .list {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          flex-wrap: wrap;
          .list-wrapper {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-direction: column;
            width: 33.33%;
            .list-item-engine {
              margin-top: 44upx;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              margin-bottom: 14upx;
              .image-item {
                width: 120upx;
                height: 120upx;
              }
              .engine-text {
                font-size: 24upx;
                font-weight: 500;
              }
            }
          }
        }
        .no-data {
          margin: 48upx 0;
          color: $font-color-light;
          display: flex;
          justify-content: center;
          align-items: center;

          .iconfont {
            margin-right: 20upx;
            font-size: $font-lg + 16upx;
          }
        }
      }
    }
  }
  .one-cover-category {
    margin-top: $spacing-base;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .box {
      width: calc(71.44vw / 3);
      margin-bottom: $spacing-lg;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      image {
        width: 64%;
        height: calc(71.44vw / 3 * 0.64);
      }
      .text {
        margin-top: 8upx;
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 26upx;
      }
      .category-tag {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: $spacing-sm;
        font-size: $font-sm + 2upx;
        margin-right: $spacing-base;
        color: $font-color-dark;
        background-color: $page-color-base;
        border-radius: 6upx;
      }
    }
  }
  .tui-product-container {
    flex: 1;
    margin-right: 10upx;
  }
  .tui-product-container:last-child {
    margin-right: 0;
  }
  .category-product-list {
    margin-bottom: 15upx;
    padding-bottom: 15upx;
    border-bottom: 1upx solid rgba(0, 0, 0, 0.08);
  }
  .category-product-list:last-child {
    border-bottom: none;
    background-color: #007aff;
  }
  .tui-pro-item {
    width: 100%;
    margin-bottom: 20upx;
    background: $color-white;
    box-sizing: border-box;
    border-radius: 12upx;
    overflow: hidden;
    transition: all 0.15s ease-in-out;
  }
  .tui-flex-list {
    display: flex;
    margin-bottom: 1upx !important;
  }
  .tui-pro-img {
    width: 100%;
    display: block;
  }
  .tui-proimg-list {
    width: 160upx;
    height: 160upx !important;
    flex-shrink: 0;
    border-radius: 12upx;
  }
  .tui-pro-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20upx;
  }
  .tui-pro-tit {
    color: #2e2e2e;
    font-size: 26upx;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .tui-sale-price {
    font-size: 34upx;
    font-weight: 500;
  }
  .tui-factory-price {
    font-size: 24upx;
    color: #a0a0a0;
    text-decoration: line-through;
    padding-left: 12upx;
  }
  .tui-pro-pay {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24upx;
    color: #656565;
    .iconfont {
      font-size: $font-lg + 6upx;
      padding: 0 $spacing-sm;
    }
  }
  .popup .layer {
    // #ifndef H5
    bottom: 0;
    // #endif
  }
  .input-box {
    height: 100upx;
    position: relative;
    display: flex;
    width: 690upx;
    margin: 0 30upx;
    align-items: center;
    .iconfont {
      width: 60upx;
      font-size: 48upx;
      font-weight: 500;
    }
    .iconsousuo2 {
      z-index: 999;
      display: flex;
      align-items: center;
      position: absolute;
      top: 22upx;
      left: 20upx;
      width: 60upx;
      height: 60upx;
      font-size: 34upx;
      color: #c0c0c0;
    }
    input {
      width: 90%;
      padding-left: 10%;
      height: 60upx;
      background-color: #f5f5f5;
      border-radius: 30upx;
      color: #888;
      font-size: 28upx;
    }
  }
  .no-data {
    margin: 48upx 0;
    color: $font-color-light;
    display: flex;
    justify-content: center;
    align-items: center;

    .iconfont {
      margin-right: 20upx;
      font-size: $font-lg + 16upx;
    }
  }
}
</style>
